<% include head.html%>
<link rel="stylesheet" href="css/jquery.seat-charts.css">
<link rel="stylesheet" href="css/seats.css">
    <div class="path">
        <p class="content path-text">
            <a href="/"><span>首页</span></a> <span>>></span> <a href="/book?id=<%=showingData.movieId%>"><span>订票</span></a> <span>>></span> 选座
        </p>
    </div>
    <div class="content" style="overflow:hidden;padding: 20px 0;" id="main">
        <div id="seat-map"> 
            <div class="front">屏幕</div>                     
        </div> 
        <div class="booking-details"> 
            <p>影片：<span><%=showingData.movieName%></span></p> 
            <p>时间：<span><%=showingData.showingTime%></span></p> 
            <p>座位：</p> 
            <ul id="selected-seats"></ul> 
            <p>票数：<span id="counter">0</span></p> 
            <p>总计：<b>￥<span id="total">0</span></b></p> 
                             
            <div class="checkout-button">确定购买</div> 
                             
            <div id="legend"></div> 
        </div> 
    </div>
    <form method="post" action="/doBooking" class="hidden" id="bookTable">
    </form>
<script src="js/jquery.seat-charts.min.js"></script>
<script>
    $(document).ready(function() {
        var price = <%=showingData.showingPrice%>; //票价 
            var $cart = $('#selected-seats'), //座位区 
            $counter = $('#counter'), //票数 
            $total = $('#total'); //总计金额 
             
        var sc = $('#seat-map').seatCharts({ 
            map: '<%=showingData.map%>'.split(","),
            legend : { //定义图例 
                node : $('#legend'), 
                items : [ 
                    [ 'a', 'available',   '可选座' ], 
                    [ 'a', 'unavailable', '已售出'] 
                ]                     
            }, 
            click: function () { //点击事件 
                if (this.status() == 'available') { //可选座 
                    $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>') 
                        .attr('id', 'cart-item-'+this.settings.id) 
                        .data('seatId', this.settings.id) 
                        .appendTo($cart); 
     
                    $counter.text(sc.find('selected').length+1); 
                    $total.text(recalculateTotal(sc)+price); 
                                 
                    return 'selected'; 
                } else if (this.status() == 'selected') { //已选中 
                    //更新数量 
                    $counter.text(sc.find('selected').length-1); 
                    //更新总计 
                    $total.text(recalculateTotal(sc)-price); 
                             
                    //删除已预订座位 
                    $('#cart-item-'+this.settings.id).remove(); 
                    //可选座 
                    return 'available'; 
                } else if (this.status() == 'unavailable') { //已售出 
                    return 'unavailable'; 
                } else { 
                    return this.style(); 
                } 
            } 
        }); 
        //已售出的座位 
        sc.get('<%=sSeatStringList%>'.split(",")).status('unavailable'); 
        //计算总金额 
        function recalculateTotal(sc) { 
            var total = 0; 
            sc.find('selected').each(function () { 
                total += price; 
            }); 
                     
            return total; 
        }
        $(".checkout-button").click(function(event) {
            var data = {
                // 逗号分割的座位，比如: '1_2,2_3'
                seats: sc.find('selected').seatIds.join(","),
                showingId:<%=showingData.showingId%>
            };
            if (data.seats === '') return;
            var formDom = $("#bookTable");
            for (item in data) {
                formDom.append('<input type="text" name="'+item+'" value="'+data[item]+'">');
            }
            showLoading();
            formDom.submit();
        });
    });
</script>
<% include foot.html%>